<template>
    <div
        id="container"
        :style="{ height: height, width: width }"
        ref="temperature"
    ></div>
</template>

<script>
/**
 * 温度计1
 */
export default {
    name: 'temperature',
    props: {
        value: {
            type: String,
            default: '1000'
        },
        title: {
            type: String,
            default: '标题'
        },
        unit: {
            type: String,
            default: '℃'
        },
        min: {
            type: String,
            default: '0'
        },
        max: {
            type: String,
            default: '135'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '400px'
        },
        params: {
            type: String,
            default: ''
        }
    },
    components: {},
    data() {
        return {
            app: {},
            config: {
                // 数值
                value: this.value,
                title: this.title,
                max: this.max
            },
            params1: {
                value: this.value
            },
            propsMax: this.max,
            kd: [],
            Gradient: [],
            leftColor: '',
            showValue: '',
            boxPosition: [70, 45],
            TP_txt: '',
        }
    },
    mounted() {
        this.getTemperature()
    },
    methods: {
        getTemperature() {
            // 判断当前的值是否大于最大值
            if (parseFloat(this.config.value) > parseFloat(this.propsMax)) {
                console.log(111)
                this.config.value = (parseFloat(this.propsMax) - 35).toString()
            }
            const showValue = parseFloat(this.config.value)
            // const dom = document.getElementById('container')
            const dom = this.$refs.temperature
            let myChart = this.$echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            })
            // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
            for (let i = 0, len = 135; i <= len; i++) {
                if (i < 10 || i > 130) {
                    this.kd.push('')
                } else {
                    if ((i - 10) % 20 === 0) {
                        this.kd.push('-3')
                    } else if ((i - 10) % 4 === 0) {
                        this.kd.push('-1')
                    } else {
                        this.kd.push('')
                    }
                }
            }

            // 中间线的渐变色和文本内容
            if (showValue > 50) {
                this.TP_txt = ''
                this.Gradient.push(
                    {
                        offset: 0,
                        color: '#93FE94'
                    },
                    {
                        offset: 0.5,
                        color: '#E4D225'
                    },
                    {
                        offset: 1,
                        color: '#E01F28'
                    }
                )
            } else if (showValue >= 35) {
                this.TP_txt = ''
                this.Gradient.push(
                    {
                        offset: 0,
                        color: '#93FE94'
                    },
                    {
                        offset: 1,
                        color: '#E4D225'
                    }
                )
            } else {
                this.TP_txt = ''
                this.Gradient.push({
                    offset: 1,
                    color: '#93FE94'
                })
            }

            this.leftColor = this.Gradient[this.Gradient.length - 1].color

            // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10 配置项
            let option = {
                // backgroundColor: '#098',
                // backgroundColor: 'white',
                title: {
                    text: this.config.title,
                    textStyle: {
                        color: '#010081',
                        align: 'center'
                    },
                    left: '55%'
                },
                // 控制图的大小，调整下面这些值就可以，
                grid: {
                    left: '45%',
                    top: '3%',
                    bottom: '14%'
                },
                yAxis: [
                    {
                        show: false,
                        data: [],
                        min: 0,
                        max: parseFloat(this.config.max),
                        axisLine: {
                            show: false
                        }
                    },
                    {
                        show: false,
                        min: 0,
                        max: 80
                    },
                    {
                        type: 'category',
                        data: ['', '', '', '', '', '', '', '', '', ''],
                        position: 'left',
                        offset: -80,
                        axisLabel: {
                            // 单位
                            fontSize: 10,
                            color: 'black'
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                xAxis: [
                    {
                        show: false,
                        min: -10,
                        max: 80,
                        data: []
                    },
                    {
                        show: false,
                        min: -10,
                        max: 80,
                        data: []
                    },
                    {
                        show: false,
                        min: -10,
                        max: 80,
                        data: []
                    },
                    {
                        show: false,
                        min: -5,
                        max: 80
                    }
                ],
                series: [
                    {
                        name: '条',
                        type: 'bar',
                        // 对应上面XAxis的第一个对)象配置
                        xAxisIndex: 0,
                        data: [
                            {
                                // 这个改那个颜色刻度的
                                value: showValue + 30,
                                label: {
                                    normal: {
                                        show: true,
                                        position: this.boxPosition,
                                        width: 30,
                                        height: 100,
                                        // 这里设置了新的变量，主要是当温度值大于最大度数的时候，直接展示实际值
                                        formatter: `{back| ${this.params1.value}}{unit| ${this.unit}}\n{downTxt| ${this.TP_txt}}`,
                                        rich: {
                                            back: {
                                                align: 'center',
                                                lineHeight: 50,
                                                fontSize: 20,
                                                fontFamily: 'digifacewide',
                                                color: 'red'
                                                // color: this.leftColor
                                            },
                                            unit: {
                                                fontFamily: '微软雅黑',
                                                fontSize: 15,
                                                lineHeight: 50,
                                                color: 'red'
                                                // color: this.leftColor
                                            },
                                            downTxt: {
                                                lineHeight: 50,
                                                fontSize: 25,
                                                align: 'center',
                                                color: 'red'
                                                // color: this.leftColor
                                            }
                                        }
                                    }
                                }
                            }
                        ],
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: this.$echarts.graphic.LinearGradient(
                                    0,
                                    1,
                                    0,
                                    0,
                                    this.Gradient
                                )
                            }
                        },
                        z: 10
                    },
                    {
                        name: '白框',
                        type: 'bar',
                        xAxisIndex: 1,
                        barGap: '-100%',
                        data: [134],
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: '#0C2E6D',
                                barBorderRadius: 50
                            }
                        },
                        z: 1
                    },
                    {
                        name: '外框',
                        type: 'bar',
                        xAxisIndex: 2,
                        barGap: '-100%',
                        data: [135],
                        barWidth: 28,
                        itemStyle: {
                            normal: {
                                color: '#4577BA',
                                barBorderRadius: 50
                            }
                        },
                        z: 0
                    },
                    {
                        name: '圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 0,
                        symbolSize: 38,
                        itemStyle: {
                            normal: {
                                color: '#93FE94',
                                opacity: 1
                            }
                        },
                        z: 2
                    },
                    {
                        name: '白圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 1,
                        symbolSize: 50,
                        itemStyle: {
                            normal: {
                                color: '#0C2E6D',
                                opacity: 1
                            }
                        },
                        z: 1
                    },
                    {
                        name: '外圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 2,
                        symbolSize: 60,
                        itemStyle: {
                            normal: {
                                color: '#4577BA',
                                opacity: 1
                            }
                        },
                        z: 0
                    },
                    {
                        name: '刻度',
                        type: 'bar',
                        yAxisIndex: 0,
                        xAxisIndex: 3,
                        label: {
                            normal: {
                                show: true,
                                position: 'left',
                                distance: 15, // 刻度数据位置
                                color: '#000000', // 刻度数字颜色
                                fontSize: 14,
                                formatter: function (params) {
                                    // console.log(params);
                                    if (params.dataIndex > 130 || params.dataIndex < 10) {
                                        return ''
                                    } else {
                                        if ((params.dataIndex - 10) % 20 === 0) {
                                            // 这个改刻度的，当减70的时候刻度是从-60开始不是从零开始
                                            return params.dataIndex - 30
                                        } else {
                                            return ''
                                        }
                                    }
                                }
                            }
                        },
                        barGap: '-100%',
                        data: this.kd,
                        barWidth: 1,
                        itemStyle: {
                            normal: {
                                color: '#000000', // 刻度线颜色
                                barBorderRadius: 120
                            }
                        },
                        z: 0
                    }
                ]
            }

            if (option && typeof option === 'object') {
                myChart.setOption(option)
            }

            window.addEventListener('resize', function () {
                myChart.resize()
            })
        }
    }
}
</script>

